<template>
	<div class="ellipsis" :style="ecss">
		{{props.text}}
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	let ecss = ref('')
	 const props = defineProps([
		 'text',
		 'lineNum',
		 'w'
	 ])
			// let w = {width:props.w,textAlign:'justify'}
			// 单行省略css
			let oneLineCss = {
				overflow:'hidden',
				whiteSpace: 'nowrap',
				textOverflow: 'ellipsis',
				width:props.w,
				textAlign:'justify'
			}
			// 多行省略css
			let moreLineCss = {
				overflow:'hidden',
				textOverflow: 'ellipsis',
				WebkitLineClamp: props.lineNum,
				display: '-webkit-box',
				WebkitBoxOrient: 'vertical',
				width:props.w,
				textAlign:'justify'
			}
			// 样式
			if(props.lineNum>1){
				ecss.value = moreLineCss
			}else{
				ecss.value = oneLineCss
			}
	// 	}
	// }
	
	
</script>

<style>
</style>